<template>
  <div id="allpay">
    <div id="search_box">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="8">
            <span class="search-title">月份：</span>
            <el-date-picker
              v-model="choseMonth"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy 年 MM 月"
              value-format="yyyy-MM"
              @change="choseMonths"
            />
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-col>
          <el-col :span="2" :offset="12">
            <el-upload
              class="upload-demo"
              :action="upload_url"
              :headers="importHeaders"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="onSuccess"
              :on-error="onError"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary" style="padding-top: 10px;">点击上传<i class="el-icon-upload el-icon--right" /></el-button>
            </el-upload>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div id="table_box">
      <el-table
        border
        stripe
        :height="tableHeight"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
        />
        <el-table-column
          fixed
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          fixed
          label="日期"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.year + '年' + scope.row.month + '月' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="110"
        />
        <!--        <el-table-column-->
        <!--          prop="unit"-->
        <!--          label="单位">-->
        <!--        </el-table-column>-->
        <el-table-column
          prop="postSalary"
          label="岗位工资"
        />
        <el-table-column
          prop="scaleSalary"
          label="薪级工资"
        />
        <el-table-column
          prop="highFixedWage"
          label="高定工资"
        />
        <el-table-column
          prop="reservedAreaSubsidy"
          label="保留地区补贴"
        />
        <el-table-column
          prop="subsidyAmountOfReservedAreas"
          label="保留地区补贴额"
        />
        <el-table-column
          prop="localSubsidy"
          label="地方津贴补贴"
        />
        <el-table-column
          prop="hardshipAndRemoteAllowance"
          label="艰苦边远津贴"
        />
        <el-table-column
          prop="localSubsidyAdd"
          label="补发地方津贴补贴"
        />
        <el-table-column
          prop="livingWageIncludedInPerformancePay"
          label="纳入绩效工资的活工资"
        />
        <el-table-column
          prop="postSubsidy"
          label="岗位津贴补贴"
        />
        <el-table-column
          prop="subsidiesForGrassrootsCadres"
          label="基层干部补贴"
        />
        <el-table-column
          prop="highTemperatureFeeAndHeatingFee"
          label="高温费/取暖费"
        />
        <el-table-column
          prop="payBack"
          label="补发工资"
        />
        <el-table-column
          prop="wagesPayable"
          label="应发工资"
        />
        <el-table-column
          prop="socialSecurityPaymentBase"
          label="社保缴费基数"
        />
        <el-table-column
          prop="endowmentInsurance"
          label="养老保险金"
        />
        <el-table-column
          prop="occupationalAnnuity"
          label="职业年金"
        />
        <el-table-column
          prop="medicalInsuranceBenefits"
          label="医疗保险金"
        />
        <el-table-column
          prop="unemploymentInsuranceBenefits"
          label="失业保险金"
        />
        <el-table-column
          prop="housingProvidentFund"
          label="住房公积金"
        />
        <el-table-column
          prop="individualIncomeTax"
          label="个人所得税"
        />
        <el-table-column
          prop="deduction"
          label="大病及考勤"
        />
        <el-table-column
          prop="unionFees"
          label="工会费"
        />
        <el-table-column
          prop="subtotalOfWithholding"
          label="扣发小计"
        />
        <el-table-column
          prop="netSalary"
          label="实发工资"
        />
      </el-table>
    </div>
    <div id="page_box">
      <el-pagination
        :current-page="page_params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page_params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="page_params.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { selectAllMessage } from '@/api/pay'
export default {
  data() {
    return {
      tableHeight: document.body.clientHeight - 230,
      loading: false,
      tableData: [],
      page_params: {
        pageNum: 1,
        pageSize: 20,
        total: 100,
        start_time: '2021-07',
        end_time: '2021-07'
      },
      choseMonth: [],
      upload_url: process.env.VUE_APP_BASE_API + '/personalpay/insertMessage',
      importHeaders: { token: window.sessionStorage.getItem('token') },
      fileList: []
    }
  },
  created() {
    this.choseMonth.push(new Date().getFullYear() + '-' + (new Date().getMonth() + 1), new Date().getFullYear() + '-' + (new Date().getMonth() + 1))
    this.page_params.start_time = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
    this.page_params.end_time = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
    this.refresh_data()
  },
  methods: {
    refresh_data() {
      this.loading = true
      selectAllMessage(this.page_params).then((res) => {
        if (res.code != '200') {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        } else {
          this.tableData = res.data.object
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.page_params.pageNum = 1
      this.page_params.pageSize = val
      this.refresh_data()
    },
    handleCurrentChange(val) {
      this.page_params.pageNum = val
      this.refresh_data()
    },
    choseMonths(val) {
      this.page_params.start_time = val[0]
      this.page_params.end_time = val[1]
    },
    search() {
      this.page_params.pageNum = 1
      this.refresh_data()
    },
    handleRemove(file, fileList) {
      console.log('123')
    },
    handlePreview(file) {
      console.log('456')
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    onSuccess() {
      this.$message({
        message: '上传成功',
        type: 'success'
      })
      this.page_params.pageNum = 1
      this.refresh_data()
    },
    onError() {
      this.$message.error('上传失败')
    }
  }
}
</script>
<style lang="scss">
    #allpay{
        #search_box {
            margin: 10px;
            .search-title {
              font-size: 14px;
              color: #909399;
            }
        }
        #table_box {
            margin: 10px;
        }
        #page_box {
            text-align: center;
        }
    }
</style>
